<breadcrumb></breadcrumb>

<div class="matero-row" fxLayout="row wrap">

  <!-- Statistics -->
  <div class="matero-col" fxFlex.gt-sm="25" fxFlex.gt-xs="50" fxFlex="100"
       *ngFor="let stat of stats">
    <mat-card [ngClass]="['text-white', stat.color]">
      <mat-card-title class="f-s-12 f-w-100">{{stat.title}}</mat-card-title>
      <mat-card-content>
        <h2>{{stat.amount}}</h2>
        <mtx-progress [value]="stat.progress.value"
                      height="2px"
                      foreground="rgba(255,255,255,1)"
                      background='rgba(0,0,0,.5)'>
        </mtx-progress>
        <small class="text-muted">Monthly</small>
      </mat-card-content>
    </mat-card>
  </div>

  <!-- Charts -->
  <div class="matero-col" fxFlex="100" fxFlex.gt-sm="60">
    <mat-card>
      <mat-card-subtitle>Traffic</mat-card-subtitle>
      <div id="chart1"></div>
    </mat-card>
  </div>
  <div class="matero-col" fxFlex="100" fxFlex.gt-sm="40">
    <mat-card>
      <mat-card-subtitle>Weekly Revenue</mat-card-subtitle>
      <div id="chart2"></div>
    </mat-card>
  </div>

  <!-- Others -->
  <div class="matero-col" fxFlex.gt-sm="50" fxFlex="100">
    <mat-card>
      <mat-tab-group class="m--16">
        <mat-tab label="First">
          <div class="m-16">
            <img class="d-block w-full" src="assets/images/pixabay/2.jpg" alt="">
            <h3>Aenean viverra arcu nec pellentesque ultrices. In erat purus, adipiscing nec lacinia
              at, ornare ac eros.
            </h3>
            <p>
              Nullam at risus metus. Quisque nisl purus, pulvinar ut mauris vel, elementum suscipit
              eros. Praesent
              ornare ante massa, egestas pellentesque orci convallis ut. Curabitur consequat
              convallis est, id luctus
              mauris lacinia vel. Nullam tristique lobortis mauris, ultricies fermentum lacus
              bibendum id. Proin non
              ante tortor. Suspendisse pulvinar ornare tellus nec pulvinar. Nam pellentesque
              accumsan mi, non
              pellentesque sem convallis sed. Quisque rutrum erat id auctor gravida.</p>
          </div>
        </mat-tab>
        <mat-tab label="Second">
          <div class="m-16">
            <img class="d-block w-full" src="assets/images/pixabay/8.jpg" alt="">
            <h3>Vestibulum vitae diam nec odio dapibus placerat. Ut ut lorem justo.</h3>
            <p>
              Fusce bibendum augue nec fermentum tempus. Sed laoreet dictum tempus. Aenean ac sem
              quis nulla malesuada
              volutpat. Nunc vitae urna pulvinar velit commodo cursus. Nullam eu felis quis diam
              adipiscing hendrerit
              vel ac turpis. Nam mattis fringilla euismod. Donec eu ipsum sit amet mauris iaculis
              aliquet. Quisque sit
              amet feugiat odio. Cras convallis lorem at libero lobortis, placerat lobortis sapien
              lacinia. Duis sit
              amet elit bibendum sapien dignissim bibendum.</p>

          </div>
        </mat-tab>
        <mat-tab label="Third">
          <div class="m-16">
            <img class="d-block w-full" src="assets/images/pixabay/16.jpg" alt="">
            <h3>Maecenas eget turpis luctus, scelerisque arcu id, iaculis urna. Interdum et
              malesuada fames ac ante
              ipsum primis in faucibus.</h3>
            <p>
              Morbi placerat est nec pharetra placerat. Ut laoreet nunc accumsan orci aliquam
              accumsan. Maecenas
              volutpat dolor vitae sapien ultricies fringilla. Suspendisse vitae orci sed nibh
              ultrices tristique.
              Aenean in ante eget urna semper imperdiet. Pellentesque sagittis a nulla at
              scelerisque. Nam augue nulla,
              accumsan quis nisi a, facilisis eleifend nulla. Praesent aliquet odio non imperdiet
              fringilla.</p>

          </div>
        </mat-tab>
      </mat-tab-group>
    </mat-card>
    <mat-card>
      <mat-card-subtitle>Album</mat-card-subtitle>
      <mat-card-content>
        <mat-grid-list cols="2">
          <mat-grid-tile class="bg-red-50">1</mat-grid-tile>
          <mat-grid-tile class="bg-purple-50">2</mat-grid-tile>
          <mat-grid-tile class="bg-orange-50">3</mat-grid-tile>
          <mat-grid-tile class="bg-cyan-50">4</mat-grid-tile>
        </mat-grid-list>
      </mat-card-content>
    </mat-card>
  </div>

  <div class="matero-col" fxFlex.gt-sm="50" fxFlex="100">
    <mat-card>
      <mat-card-subtitle>Avatar List</mat-card-subtitle>
      <mat-list>
        <mat-list-item *ngFor="let message of messages">
          <img matListAvatar [src]="message.img" alt="">
          <h3 matLine> {{message.subject}} </h3>
          <p matLine>
            <span>{{message.content}} </span>
          </p>
        </mat-list-item>
      </mat-list>
    </mat-card>

    <mat-card>
      <mat-card-subtitle>Revenue Table</mat-card-subtitle>
      <mat-card-content>
        <table class="w-full" mat-table [dataSource]="dataSource">
          <ng-container matColumnDef="position">
            <th mat-header-cell *matHeaderCellDef> No. </th>
            <td mat-cell *matCellDef="let element;"> {{element.position}} </td>
          </ng-container>
          <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef> Name </th>
            <td mat-cell *matCellDef="let element;"> {{element.name}} </td>
          </ng-container>
          <ng-container matColumnDef="weight">
            <th mat-header-cell *matHeaderCellDef> Weight </th>
            <td mat-cell *matCellDef="let element;"> {{element.weight}} </td>
          </ng-container>
          <ng-container matColumnDef="symbol">
            <th mat-header-cell *matHeaderCellDef> Symbol </th>
            <td mat-cell *matCellDef="let element;"> {{element.symbol}} </td>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
      </mat-card-content>
    </mat-card>

    <mat-card>
      <mat-card-subtitle>Chips & Buttons</mat-card-subtitle>
      <mat-card-content>
        <mat-chip-list>
          <mat-chip>One fish</mat-chip>
          <mat-chip color="primary" selected>Primary fish</mat-chip>
          <mat-chip color="accent" selected>Accent fish</mat-chip>
          <mat-chip color="warn" selected>Two fish</mat-chip>
          <mat-chip class="bg-orange-500" selected>Orange fish</mat-chip>
          <mat-chip class="bg-teal-500" selected>Teal fish</mat-chip>
          <mat-chip class="bg-cyan-500" selected>Cyan fish</mat-chip>
          <mat-chip class="bg-purple-500" selected>Purple fish</mat-chip>
          <mat-chip class="bg-green-500" selected>Green fish</mat-chip>
        </mat-chip-list>

        <div>
          <button mat-raised-button>Basic</button>
          <button mat-raised-button color="primary">Primary</button>
          <button mat-raised-button color="accent">Accent</button>
          <button mat-raised-button color="warn">Warn</button>
          <button mat-raised-button disabled>Disabled</button>
          <a mat-raised-button routerLink=".">Link</a>
          <button mat-raised-button class="bg-orange-500 text-white">Orange</button>
          <button mat-raised-button class="bg-teal-500 text-white">Teal</button>
          <button mat-raised-button class="bg-cyan-500 text-white">Cyan</button>
          <button mat-raised-button class="bg-purple-500 text-white">Purple</button>
          <button mat-raised-button class="bg-green-500 text-white">Green</button>
        </div>
      </mat-card-content>
    </mat-card>

  </div>
</div>